<template>
  <div class="bg">
    <el-card class="form-card">
      <template #header>
        <div class="card-header">
          <span>注册账户</span>
        </div>
      </template>

      <el-form ref="ruleFormRef" :rules="rules" status-icon :model="form" label-width="80px">
        <el-form-item label="账号" prop="username">
          <el-input v-model="form.username" @blur="repeat(form.username)" />
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input v-model="form.password" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input v-model="form.checkPass" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="名字" prop="name">
          <el-input v-model="form.fullname" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="性别" prop="sex" autocomplete="off">
          <el-radio label="男" v-model="form.sex" />
          <el-radio label="女" v-model="form.sex" />
        </el-form-item>

        <el-form-item label="手机" prop="tel" autocomplete="off">
          <el-input v-model="form.tel" type="text" />
        </el-form-item>

        <el-form-item>
          <el-checkbox label="同意本站协议" v-model="form.isAgree" prop="isAgree" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSubmit(ruleFormRef)" :disabled="!form.isAgree">注册</el-button>
        </el-form-item>
      </el-form>
      <el-row justify="space-between">
        <el-col :span="5">
          <el-link href="/#/login" type="info">登录账号</el-link>
        </el-col>
        <el-col :span="5">
          <el-link type="info">忘记密码?</el-link>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
    
<script setup>
import { reactive, ref } from 'vue'
import Admin from '@/api/admin';
// import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
const form = reactive({
  username: '',
  password: '',
  checkPass: '',
  fullname: '',
  sex: '男',
  tel: '',
  isAgree: false,

})
const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'))
    return
  } else {
    if (form.checkPass !== '') {
      // if (!ruleFormRef.value) return
      ruleFormRef?.value?.validateField('checkPass', () => null)
    }
    callback()
  }
}
//二次确认密码
const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
    return
  } else if (value !== form.password) {
    callback(new Error("两次输入不一致"))
    return
  } else {
    callback()
  }
}
const ruleFormRef = ref();
const rules = reactive({
  username: [
    // 为空执行上行，输入执行下行
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 3, max: 20, message: '账户长度3到20', trigger: 'blur' },
  ],
  password: [{ required: true, validator: validatePass, trigger: 'blur' }],
  checkPass: [{ required: true, validator: validatePass2, trigger: 'blur' }],
  fullname: [
    { required: true, message: '请输入名字', trigger: 'blur' },
    { min: 3, max: 5, message: '名字长度3到5', trigger: 'blur' },
  ],
  tel: [
    { required: true, message: '请输入手机号' },
    { pattern: /^1[3|4|5|7|8][0-9]{9}$/, message: '请输入正确手机号' },
  ],
  sex: [{ required: true, }],
  isAgree: [
    {
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change',
    },
  ],
})
async function repeat(formEl) {
  let { status, msg, data } = await Admin.isRepeat({ username: formEl });
  if (status) {
    ElMessage.success(msg);
  } else {
    ElMessage.error(msg);
  }
}
//获取router实例对象
let router = useRouter();
//登录
function handleSubmit(formEl) {
  //校验整个表单
  formEl.validate(async (valid, fields) => {
    if (valid) {
      //通过校验
      let { status, msg, data } = await Admin.register({ ...form });
      if (status) {
        ElMessage.success(msg);
        router.push('/login');
      } else {
        ElMessage.error(msg);
      }
    } else {
      //没通过校验
      console.log('校验失败字段', fields);
    }

  })
}
</script>
<style lang="less" scoped>
.bg {
  position: relative;
  min-height: 100vh;
  background: url(../assets/img/register/bg.jpg) top center;
  background-size: cover;

  .form-card {
    width: 400px;
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
  }
}
</style>